<!--
 * @Descripttion : 
 * @Autor        : Lilong
 * @Date         : 2022-10-08 16:07:07
 * @LastEditTime : 2022-10-09 17:20:27
 * @FilePath     : \vue3.2.31-case\响应式基础\响应式工具函数\toRefs\setup中return解构\App.vue
-->
<script lang="ts">
import { reactive, defineComponent, toRefs } from "vue";

export default defineComponent({
  setup(){
    const state = reactive({
      id: 1,
      name: 'front-refiend'
    });

    return {
      ...toRefs(state)
    };
  }
})
</script>

<template>
  <h3>toRefs</h3>
  <h5>
    作用：浅层批量转换。将传入的对象中每一项转为ref对象
  </h5>
  <h5>
    参数：<br>
    引用数据或reactive类型的数据
  </h5>
  <h5>
    使用场景：<br>
    1、解构props，将props中每一项转换为ref对象,保持响应性<br>
    2、解构reactive响应式对象，避免失去响应性，...toRefs('reactive响应式对象') <br>
    3、组合式函数中返回toRefs包裹的对象或reactive对象，使用时可在不失去响应性的情况下破坏结构 <br>
  </h5>
  <h5>
    toRefs和toRef的区别：<br>
    1、toRef 是对一个个属性手动赋值，而 toRefs 是自动解构赋值
  </h5>
  <h5>
    注意：<br>
    1、使用 toRefs 转化后生成的 ref 数据如果是引用类型数据时，那么它不是原始数据的拷贝，而是原始数据的引用，改变它的数据也会同时改变原始数据
  </h5>
  <ul>
    <li>{{id}}</li>
    <li>{{name}}</li>
  </ul>
</template>

<style scoped>
ul,li{
  list-style: none;
}
</style>
